<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript"
            src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=KLvGmc82LiqmbyWkfq2bqCpCUHexQSDH"></script>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css" media="all">
</head>
<body>
<div style="display: none" id="container"></div>
<form class="layui-form" id="form1">
    <div class="layui-form-item" style="margin-top: 10px;margin-left: 10px;">
        <div class="layui-input-inline">
            <input type="text" name="phone" id="phone" lay-verify="required" placeholder="根据手机号码查找" autocomplete="off"
                   class="layui-input">
        </div>
        <div class="layui-input-inline">
            <input type="text" name="name" id="name" lay-verify="required" placeholder="根据姓名查找" autocomplete="off"
                   class="layui-input">
        </div>
        <div>
            <button id="find" class="layui-btn" type="button" lay-filter="find"><i class="layui-icon">&#xe615;</i>
            </button>
        </div>
    </div>
</form>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="upd">修改</button>
        >
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="/static/js/jquery-3.2.1.js" charset="UTF-8"></script>
<script src="/static/js/layui/layui.js" charset="utf-8"></script>
<script>
    var master = "";
    layui.use(['table', 'jquery'], function () {
        var table = layui.table
            , $ = layui.jquery;
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            elem: '#test'
            , height: 'full'
            , url: '/master/page'
            , method: 'post'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cellMinWidth: 80
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: '工号', width: 80}
                , {field: 'name', title: '姓名', width: 100}
                , {field: 'sex', title: '性别', width: 80}
                , {field: 'age', title: '年龄', width: 80}
                , {field: 'phone', title: '手机号'}
                , {field: 'account', title: '账号'}
                , {
                    field: 'address', title: '位置', width: 300, templet: (item) => {
                        return item.masterAddress.address
                    }
                }
                , {
                    field: 'status', title: '状态', width: 80, templet: (item) => {
                        return status(item.masterAddress.status)
                    }
                }
            ]]
            , page: true
            , id: 'master'
            , parseData: (res) => {
                if (res.code == 200) {
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.page.total,
                        "data": res.page.list,

                    }
                }
            }
            , response: {
                statusCode: 200
            }
        });
        //搜索
        $("#find").click(function () {
            table.reload('master', {
                where: {
                    name: $("#name").val(),
                    phone: $("#phone").val()
                }
            });
        });
        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    var data = checkStatus.data;
                    layer.open({
                        type: 2,
                        skin: 'layui-layer-demo', //样式类名
                        title: '新增',
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        maxmin: true,
                        area: ['30%', '65%'],
                        shadeClose: true, //开启遮罩关闭
                        content: '/router/master/saveMaster'
                    });
                    break;
                case 'upd':
                    var data = checkStatus.data;
                    master = data;
                    layer.open({
                        type: 2,
                        skin: 'layui-layer-demo', //样式类名
                        title: '修改',
                        closeBtn: 1, //不显示关闭按钮
                        anim: 2,
                        maxmin: true,
                        area: ['30%', '65%'],
                        shadeClose: true, //开启遮罩关闭
                        content: '../master/upd'
                    });
                    break;
            }
            ;
        });
    });

    function status(status) {
        var str = "";
        if (status == '0') {
            str = "在忙";
        }
        if (status == '1') {
            str = "空闲";
        }
        if (status == '2') {
            str = "其他";
        }
        return str;
    }


    //地址逆解析
    /*function f(lng, lat) {
        if (!lng && typeof (lng) != "undefined" && lng != 0 && !lat && typeof (lat) != "undefined" && lat != 0) return "无位置信息";
        let address = "无位置信息";
        let test = $.ajax({
            url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak=VAFM1z8xo0Iybb9LczRiKoEGWZAbujyQ&output=json&coordtype=wgs84ll&location=' + lat + "," + lng,
            type: 'GET',
            dataType: 'jsonp',//请求方式为jsonp
            success: (res) => {
                if (res.status == 0) {
                    console.log(address) //无位置信息
                    address = res.result.formatted_address;
                    console.log(address) //河南省郑州市管城回族区法院西街35号
                }
                return res.result.formatted_address;
            }

        })
        layer.alert(JSON.stringify(test))
        console.log(JSON.stringify(test))
        console.log(test.responseJSON.result.formatted_address)
        console.log(address) //无位置信息
        return address;
    }*/
</script>
</body>
</html>